<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Focus and Blur Event Test for Opera</title>
	<script type="text/javascript" src="../../../../build/yui/yui.js"></script>
</head>
<body class="yui3-skin-sam">

	<h1>Opera Focus and Blur Event Test</h1>

	<h2>Background</h2>
	<p>
		By default the <code>focus</code> and <code>blur</code> events do not 
		bubble.  This is problematic for developers wishing to listen for these 
		events via event delegation.  Use of capture phase event listeners for 
		<code>focus</code> and <code>blur</code> is useful in that they enable 
		the use of these events when using event delegation.
	</p>
	<p>
    	Opera implements capture phase events per spec rather than
    	the more useful way it is implemented in other browsers:
    	The event doesn't fire on a target unless there is a
    	listener on an element in the target's ancestry.  If a
    	capture phase listener is added only to the element that
    	will be the target of the event, the listener won't fire.		
	</p>
	<p>
		To work around the implementation of capture phase events in Opera, 
		the YUI3 Event Utility uses the <code>DOMFocusIn</code> and 
		<code>DOMFocusOut</code> events 
		rather than capture phase listeners for <code>focus</code> and 
		<code>blur</code>.
	</p>
	
	<h2>Using this Test</h2>
	<p>
		Use the keyboard or mouse to place focus into and the remove focus 
		from the following text box.  You should see a log message appear 
		for each event in Opera.
	</p>


	<input type="text" id="text-1">

	<script type="text/javascript">

	YUI({
        logExclude: {	
        	Dom: true, 
			Selector: true, 
			Node: true, 
			attribute: true, 
			base: true, 
			event: true, 
			widget: true },
        lazyEventFacade: true
	}).use('console', 'node', 'event-focus', function (Y) {

			(new Y.Console()).render();
			
			var textBox = document.getElementById("text-1");

			//	The following standard capture phase focus and blur event 
			//	listeners will not be called in Opera.
			
			textBox.addEventListener("focus", function () {
				
				Y.log("text-1 standard DOM capture phase focus listener called");
				
			}, true);

			textBox.addEventListener("blur", function () {
				
				Y.log("text-1 standard DOM capture phase blur listener called");
				
			}, true);			


			//	The following YUI3 focus and blur event listeners WILL be 
			//	called in Opera.

			Y.on("focus", function () {
				
				Y.log("focus listener called for text box!");
				
			}, "#text-1");
			
			Y.on("blur", function () {
				
				Y.log("blur listener called for text box!");
				
			}, "#text-1");			

		});

	</script>

</body>
</html>
